{% block sw_text_preview %}
<div class="sw-text-preview">
    {% block sw_text_preview_shortened_content %}
    <span v-html="shortenedText"></span>
    {% endblock %}

    {% block sw_text_preview_expand_button %}
    <mt-button
        v-if="shortened"
        class="sw-text-preview__expand-button"
        ghost
        size="x-small"
        variant="secondary"
        @click.prevent="openModal"
    >
        {{ $tc('global.sw-text-preview.showMoreButton') }}
    </mt-button>
    {% endblock %}

    {% block sw_text_preview_modal %}
    <sw-modal
        v-if="showModal"
        :title="modalTitle"
        @modal-close="closeModal"
    >
        {% block sw_text_preview_modal_content %}
        <div v-html="fullText"></div>
        {% endblock %}

        <template #modal-footer>
            {% block sw_text_preview_modal_footer %}
            <mt-button
                size="small"
                variant="secondary"
                @click="closeModal"
            >
                {{ $tc('global.sw-modal.labelClose') }}
            </mt-button>
            {% endblock %}
        </template>
    </sw-modal>
    {% endblock %}
</div>
{% endblock %}
